<template>
  <el-dialog
    v-model="dialogVisible"
    title="增加回款记录"
    width="30%"
    :before-close="handleClose"
  >
    <div class="class-dialog">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="回款金额" prop="return_money">
          <el-input
            placeholder="回款金额（元）"
            v-model="ruleForm.return_money"
          />
        </el-form-item>
        <el-form-item label="回款日期" prop="retrun_date" style="width: 100%">
          <el-date-picker
            style="width: 100%"
            v-model="ruleForm.return_date"
            type="date"
            placeholder="日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark" style="width: 100%">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="备注"
            v-model="ruleForm.remark"
          />
        </el-form-item>
        <el-form-item label="附件" style="width: 100%">
          <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :on-change="fileOnChange"
            :show-file-list="false"
          >
            <div class="file-btn">
              <el-button type="primary" size="small"> 文件上传 </el-button>
            </div>
          </el-upload>

          <div class="file-list" v-if="fileList.length > 0" style="width: 100%">
            <div class="file-list-item" v-for="(item, i) in fileList">
              <a href="url" target="_blank" :download="item.name">
                {{ item.name }}
              </a>
              <el-icon class="close" @click="fileRemove(i)">
                <IEpClose />
              </el-icon>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { receivablesCreateApi } from "@/plugins/api/customer/manage/tab6.js";
import { fileApi } from "@/plugins/api/upload";
const props = defineProps({
  treeData: {
    type: Array,
    default: [],
  },
  dataInfo: {
    type: Object,
    default: {},
  },
});
let ruleForm = ref({});
let rules = {
  return_money: [
    { required: true, message: "请输入回款金额", trigger: "blur" },
  ],
  return_date: [
    { required: true, message: "请选择回款日期", trigger: "change" },
  ],
};
let dialogVisible = ref(false);
function handleClose(done) {
  // dialogVisible.value = false;
  ElMessageBox.confirm("是否确定关闭此对话框?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
}
let title = ref("");
let ruleFormRef = ref(null);
function initFun(row, type) {
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields();
  }
  fileList.value = [];
  ruleForm.value = {};
  ruleForm.value.customer_id = props.dataInfo.id;
  ruleForm.value.order_no = row.order_no;
  console.log(ruleForm.value);
  if (type) {
    ruleForm.value = { ...ruleForm.value, ...row };
    if (row.files) {
      fileList.value = [...JSON.parse(row.files)];
    }
  }

  dialogVisible.value = true;
}

const emit = defineEmits(["refreshList", "addRefreshList"]);
function submit() {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      let obj = { ...ruleForm.value };
      obj.files = fileList.value;

      receivablesCreateApi(obj).then((data) => {
        ElMessage.success("新增成功！");
        dialogVisible.value = false;
        emit("refreshList");
      });
    }
  });
}
let fileList = ref([]);
function fileOnChange(file) {
  let formData = new FormData();
  formData.append("file", file.raw);
  fileApi(formData).then((resp) => {
    if (resp) {
      fileList.value.push({
        name: resp.file_name,
        url: resp.file_url,
      });
    } else {
      ElMessage.danger("上传失败！请重新上传！");
    }
  });
}
function fileRemove(i) {
  fileList.value.splice(i, 1);
}

onMounted(() => {});
defineExpose({
  initFun,
});
</script>
<style scoped lang="scss">
.file-list {
  width: 100%;

  .file-list-item {
    display: flex;

    span {
      align-self: center;
    }

    .close {
      display: none;
      align-self: center;
      margin-left: 20px;
      cursor: pointer;

      &:hover {
        color: #0f88ce;
      }
    }

    &:hover .close {
      display: block;
    }
  }
}
</style>
